<template>
    <div>
        <div style="font-family: 幼圆;">
            <header id="nav-header">
                <div class="header-box">
                    <Row>
                        <Col :md="24" :sm="20" :xs="20">
                              <span class="nav-header-logo">
                                    <img src="../../assets/logo.png"
                                         style="border-radius: 50%;margin-top: 2px;height: 70px"/>
                                    <span style="font-size: 25px;margin:2%;font-weight: bolder;color: #2b85e4">blog</span>
                                </span>
                        </Col>

                        <Col :md="0" :sm="4" :xs="4">
                            <div class="tr">
                                <Icon @click="toggleMobileMenu" size="34" type="ios-menu" style="margin-top:8px"
                                      color="#000"/>
                            </div>
                        </Col>
                    </Row>
                </div>
            </header>
            <div id="main">
                <div>
                    <Row>
                        <Col :lg="24" :md="24" :sm="0" :xs="0">
                            <Menu mode="horizontal" @on-select="goPage" :active-name="currentRouterName">

                                <MenuItem name="Home" to="home">
                                    <Icon type="md-desktop" />
                                    控制台
                                </MenuItem>
                                <MenuItem name="Blogs" to="blogs">
                                    <Icon type="ios-paper"/>
                                    博客管理
                                </MenuItem>
                                <MenuItem name="Type" to="type">
                                    <Icon type="ios-bulb"/>
                                    分类管理
                                </MenuItem>
                                <MenuItem name="Tag" to="tag">
                                    <Icon type="md-pricetag"/>
                                    标签管理
                                </MenuItem>
                                <MenuItem name="Image" to="image">
                                    <Icon type="md-images"/>
                                    图库管理
                                </MenuItem>
                                <MenuItem name="Link" to="link">
                                    <Icon type="ios-link"/>
                                    友情链接管理
                                </MenuItem>


                                <Submenu name="8" v-show="this.user.token == ''||this.user.token == null ?false:true">
                                    <template slot="title">
                                        <Avatar :src="this.user.headimgurl"/>
                                        &nbsp;&nbsp;<span style="font-size: large">{{this.user.nickname}}</span>
                                    </template>
                                    <MenuGroup title="使用">
                                        <MenuItem name="UserNews" to="userNews">个人信息</MenuItem>
                                        <MenuItem name="3-3" ><span @click="logout">退出登录</span></MenuItem>
                                    </MenuGroup>
                                </Submenu>

                            </Menu>
                        </Col>
                        <Col :lg="0" :md="0" :sm="24" :xs="24">
                            <Drawer placement="left" :closable="false" v-model="showMobileMenu">
                                <Menu mode="vertical" @on-select="goPage" :active-name="currentRouterName">

                                    <MenuItem name="Home" to="home">
                                        <Icon type="md-desktop" />
                                        控制台
                                    </MenuItem>
                                    <MenuItem name="Blogs" to="blogs">
                                        <Icon type="ios-paper"/>
                                        博客管理
                                    </MenuItem>
                                    <MenuItem name="Type" to="type">
                                        <Icon type="ios-bulb"/>
                                        分类管理
                                    </MenuItem>
                                    <MenuItem name="Tag" to="tag">
                                        <Icon type="md-pricetag"/>
                                        标签管理
                                    </MenuItem>
                                    <MenuItem name="Image" to="image">
                                        <Icon type="md-images"/>
                                        图库管理
                                    </MenuItem>
                                    <MenuItem name="Link" to="link">
                                        <Icon type="ios-link"/>
                                        友情链接管理
                                    </MenuItem>

                                    <Submenu name="8" v-show="this.user.token == ''||this.user.token == null ?false:true">
                                        <template slot="title">
                                            <Avatar :src="this.user.headimgurl"/>
                                            &nbsp;&nbsp;<span style="font-size: large">{{this.user.nickname}}</span>
                                        </template>
                                        <MenuGroup title="使用">
                                            <MenuItem name="UserNews" to="userNews">个人信息</MenuItem>
                                            <MenuItem name="3-3" ><span @click="logout">退出登录</span></MenuItem>
                                        </MenuGroup>
                                    </Submenu>
                                </Menu>
                            </Drawer>
                        </Col>
                    </Row>
                </div>

                <div id="content">
                    <router-view/>
                </div>

                <div id="footer">
                    <p>Wdhcr &copy; &nbsp;&nbsp;&nbsp;2020 </p>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        // mixins:[commonMixins],
        data() {
            return {


                currentRouterName: '',
                showMobileMenu: false,
                //扫码登录后的用户信息
                user: {
                    headimgurl:'',
                    nickname: '',
                    token: '',
                },
            }
        },
        created() {
            //获取当前地址栏路径，选中菜单
            this.currentRouterName = this.$route.name
            // console.log(this.$route.name);
            if (window.sessionStorage.getItem("user") != null){
                const redata = JSON.parse(window.sessionStorage.getItem("user"));
                this.user = redata;
            }

        },

        //用来监测Vue实例上的数据变动。
        watch:{
            //检测路由的变化，
            '$route' (newRoute) {
                this.currentRouterName = newRoute.name
            }
        },
        mounted() {
            window.onresize = () => {
                if (window.innerWidth >= 768) {
                    this.showMobileMenu = false
                }
            }
        },
        methods: {
            goPage(name) {
                // this.$router.push({name:name})
                this.showMobileMenu = false
            },
            toggleMobileMenu() {
                this.showMobileMenu = !this.showMobileMenu
            },
            logout(){
                window.sessionStorage.removeItem("user");
                window.location.reload();
            },
        }
    }
</script>
<style lang="less">
    #nav-header {
        width: 100%;
        height: 50px;
        padding: 0 40px;
        box-sizing: border-box;
        z-index: 1000;
        position: fixed;
        top: 0;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
        font-size: 14px;

        .header-box {
            max-width: 1400px;
            margin: 0 auto;

        }

        .nav-header-logo {
            img {
                height: 46px;
                vertical-align: middle;
            }

            span {
                font-family: 幼圆;
                font-size: 16px;
                font-weight: bolder;
            }
        }
    }

    #main {
        max-width: 1400px;
        margin: 60px auto 20px auto;
    }


    #footer {
        text-align: center;
        padding: 0px;
    }
    //处理表格的内边距
    .ivu-table-cell{
        padding-right: 0px !important;
        padding-left: 0px !important;
        text-align: center;
    }
</style>

